/*
 * 认证进度View
 */

import React from 'react';
import Config from "../Config";
import PropTypes from 'prop-types';

const CircleView = ({selected, width}) => {
    return (
        <p style={{
            width: width,
            height: width,
            borderRadius: width,
            backgroundColor: selected ? Config.BaseColor : ColorGray,
            display: 'inline-block'
        }}/>
    );
};

const LineView = ({style, color}) => {
    return (
        <hr style={{
            ...style,
            height: '1px',
            backgroundColor: color,
            display: 'inline-block',
            border: 'none',
            margin: '0 0.2rem'
        }}/>
    );
};

const ColorGray = '#d3d3d3';

const LineDatas = ['实名认证', '亲友信息', '工作认证','身份证认证'];

class LineStepView extends React.Component {

    render() {

        const {list, index, style} = this.props;

        let datas = list ? list : LineDatas;

        let views = [];
        datas.forEach((data, vi) => {
            if (vi > 0) {
                views.push(
                    <LineView
                        key={vi + 'line'}
                        style={{flexGrow: 1}}
                        color={vi <= index ? Config.BaseColor : ColorGray}
                    />
                );
            }
            views.push(<CircleView key={vi + 'circle'} selected={vi <= index} width='2.2rem'/>);
        });
        return (
            <div style={{
                padding: '1.2rem 1rem',
                ...style
            }}>
                <div style={{
                    display: 'flex',
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-around',
                    margin: '0 1.5rem 0 1rem'
                }}>{views}</div>
                <div style={{
                    display: 'flex',
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    margin: '0.7rem 0.3rem 0',
                    fontSize:'0.5rem'
                }}>
                    {datas.map((data, i) => {
                        let color = i <= index ? Config.BaseColor : ColorGray;
                        return <span key={i} style={{color}}>{data}</span>
                    })}
                </div>
            </div>
        );
    }

}

LineStepView.propTypes = {
    index: PropTypes.number.isRequired,
    list: PropTypes.array,
};

export default LineStepView;
